<template>
	<view>
		<view class="cell" v-if="detail.workOrderResultDetailVo.star">
			<view class="cell-title">用户评价</view>
			<uni-rate v-model="detail.workOrderResultDetailVo.star" disabled readonly></uni-rate>
		</view>
		
<!-- 		<view class="cell" v-if="detail.workOrderVerifyDetailVo" >
			<view v-if="detail.workOrderVerifyDetailVo.verifyStatus==2" style="color: #0DB07C;">审核通过</view>
			<view v-if="detail.workOrderVerifyDetailVo.verifyStatus==3" style="color: #DD524D;">审核不通过</view>
			<view v-if="detail.workOrderVerifyDetailVo.verifyStatus==3 && detail.workOrderVerifyDetailVo.reason" class="cell">
				<view class="cell-title">拒绝原因</view>
				<view class="cell-content">{{detail.workOrderVerifyDetailVo.reason}}</view>
			</view>
		</view> -->
		
		<view class="card">
			<view class="ing" style="font-weight: bold;font-size: large;">{{statuses[detail.status]}}</view>
			<view class="splitter" style="margin: 20rpx 0;"></view>
			<view class="gst">工单编号：{{detail.no}}</view>
			<view class="gst">工单类型：{{types[detail.type] || ''}}</view>
		</view>
		
		<view class="card" v-if="detail.workUserOrderDetailVo" style="line-height: 1.5em;">
			<view class="gst">联系人：{{detail.workUserOrderDetailVo.createName || detail.workUserOrderDetailVo.comapanyName || detail.workUserOrderDetailVo.name || ''}}</view>
			<view class="gst">联系电话：{{detail.workUserOrderDetailVo.createPhone || detail.workUserOrderDetailVo.phone || ''}}</view>
			<view class="gst">客户地址：{{detail.address || ''}}</view>
		</view>
		
		<view class="card" style="line-break: 1.5em;" v-if="[types['开通'], types['报修']].includes(detail.type)">
			<view class="gst">上门时间：
				<block v-if="detail.workUserOrderDetailVo.visitDate">
					{{detail.workUserOrderDetailVo.visitDate | smartTime("YY/mm/dd")}}&nbsp;{{detail.workUserOrderDetailVo.visitStartTime || ''}}-{{detail.workUserOrderDetailVo.visitEndTime || ''}}
				</block>
				<block v-else>----</block>
			</view>
		</view>
		
		<view class="card" style="line-height: 1.5em;">
			<view class="gst">工单来源：{{sources[detail.source] || ''}}</view>
			<view class="gst" v-if="detail.applyTime">申请时间：{{detail.applyTime}}</view>
			<view class="gst" v-if="detail.allocateTime">派单时间：{{detail.allocateTime}}</view>
			<view class="gst" v-if="detail.acceptTime">接单时间：{{detail.acceptTime}}</view>
			<view class="gst" v-if="detail.finishTime">完成时间：{{detail.finishTime}}</view>
		</view>
		
		<view v-if="detail.workStationOrderDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst">水站名称：{{detail.workStationOrderDetailVo.name}}</view>
			<view class="gst">水站地址：{{detail.address}}</view>
			<view class="gst" v-if="detail.type==types['更换滤芯']">滤芯型号：{{detail.workStationOrderDetailVo.chipType}}</view>
		</view>
		
		<view v-if="detail.remark" class="card" style="line-height: 1.5em;">
			<view class="gst">报停原因：{{detail.remark}}</view>
		</view>

		<view v-if="detail.workOrderHitchDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst" v-if="detail.workOrderHitchDetailVo.type">故障类型：{{detail.workOrderHitchDetailVo.type}}</view>
			<view class="gst" v-if="detail.workOrderHitchDetailVo.remark">故障内容：{{detail.workOrderHitchDetailVo.remark}}</view>
			<view class="gst">故障图片：</view>
			<view class="gallery" v-if="detail.workOrderHitchDetailVo.picList.length>0">
				<image :key="idx" @tap="preview($event, detail.workOrderHitchDetailVo.picList, idx)" webp show-menu-by-longpress lazy-load
				v-for="(img, idx) in detail.workOrderHitchDetailVo.picList" :src="img" mode="aspectFill" />
			</view>
		</view>
		
		<view class="card" style="line-height: 1.5em;" 
		v-if="detail.type==types['机房巡检'] && [statuses.待审核, statuses.审核通过].includes(detail.status)">
			<navigator class="horizontal gst" :url="`../forms/forms?form=1&id=${detail.id}&title=清洁与设备记录表`">
				<view>表一：清洁与设备记录表</view>
				<view>点击查看</view>
			</navigator>
			<navigator class="horizontal gst" :url="`../forms/forms?form=2&id=${detail.id}&title=维护人员日常巡检总表`">
				<view>表二：维护人员日常巡检总表</view>
				<view>点击查看</view>
			</navigator>
		</view>
		
		<view v-if="detail.workOrderResultDetailVo" class="card" style="line-height: 1.5em;">
			<view class="gst">服务内容</view>
			<view>{{detail.workOrderResultDetailVo.remark}}</view>
			<view class="gst">现场图片：</view>
			<view class="gallery" v-if="detail.workOrderResultDetailVo.picList.length>0">
				<image style="width: 200rpx;height:200rpx" :key="idx" @tap="preview($event, detail.workOrderResultDetailVo.picList, idx)" webp show-menu-by-longpress lazy-load
				v-for="(img, idx) in detail.workOrderResultDetailVo.picList" :src="img" mode="aspectFill" />
			</view>
		</view>
		
		<view style="margin-bottom: 100rpx;"></view>
		
		<view class="bottom horizontal">
			<button style="background: #007AFF;color: white;" class="capsule scale" @tap="startReceive" v-if="detail.status==2">开始接单</button>
			<button style="background: #007AFF;color: white;" class="capsule scale" @tap="submit" v-else-if="detail.status==3">提交工单</button>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import {statuses, sources, types, users} from '../../static/constants.js'
	
	const app = getApp()
	export default {
		components: {
			uniRate, 
		},
		onLoad(opt) {
			console.log(opt.id)
			uni.showLoading({
				title:'加载中...'
			})
			if (opt.id) {
				// 获取对应id下的工单详情
				uni.request({
					header: {
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + 'workOrder/detail/' + opt.id,
					
					method: 'GET',
					data: {},
					success: res => {
						uni.hideLoading()
						const {
							data
						} = res
						console.log(data)
						if (data.code == 200) {
							this.detail = data.data
						} else if (data.code == 500) {
							uni.showToast({
								icon: 'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {
						console.error(err)
					},
					complete: () => {}
				});
			}
		},
		data() {
			return {
				maintainers:[
					
				],
				types, 
				statuses, 
				sources,
				users, 
				detail: {
					id: '', // 工单id
					no: "", // 工单编号
					address: "", // 工单地址
					type: 0, // 工单类型 1-开通2-报修3-报停4-恢复 5-机房巡检 6 更换滤芯
					source: 0, // 来源 1-是民小程序2-管理员创建
					status: 0, // 1-待派单 2- 待接单 3-已接单 4-待评价/待审核 5 已评价 6 通过  7 拒绝
					applyTime: '',   // 申请时间
					serviceTime: '', // 上门时间
					allocateTime: "", // 派单时间
					acceptTime: "", // 接单时间
					finishTime: "", // 完成时间
					remark: "", // 报停原因或以及一些备注
					visitDate: "",							// 上门时间
					visitStartTime:"",					// 上门开始时间
					visitEndTime: "",						// 上门结束时间
					userName: '',
					phone:'',
					workUserOrderDetailVo: {
						companyName: "", // 公司名称
						name: "", // 开通人姓名 或公司联系人姓名
						phone: "", // 手机号,
						type: 0, // 开通用户类型 1-个人 2-单位
					},
					staff: {
						name: "", // 维保人员名称
						idCard: "", //维保身份证号
						phone: "" //维保人员联系方式
					},
				}
			}
		},
		filters: {
			addr(address) {
				const {
					streetAddress
				} = address
				return `${streetAddress.provinceName}${streetAddress.cityName}${streetAddress.regionName}
				${streetAddress.streetName}${address.courtName}${address.buildingNo}栋${address.roomNo}`
			},
			smartTime(date, fmt){
				let ret;
				date = new Date(date)
				const opt = {
				    "Y+": date.getFullYear().toString(),        // 年
				    "m+": (date.getMonth() + 1).toString(),     // 月
				    "d+": date.getDate().toString(),            // 日
				    "H+": date.getHours().toString(),           // 时
				    "M+": date.getMinutes().toString(),         // 分
				    "S+": date.getSeconds().toString()          // 秒
				    // 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
				    ret = new RegExp("(" + k + ")").exec(fmt);
				    if (ret) {
				        fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
				    };
				};
				return fmt;
			}
		},
		methods: {
			// 预览图片
			preview(evt, imgs, idx) {
				console.log(idx)
				uni.previewImage({
					current: idx,
					urls: imgs,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			// 开始接单
			startReceive(){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.domain + 'workOrder/accept',
					method: 'POST',
					data: {
						workId: this.detail.id,
					},
					success: res => {
						const {data} = res
						this.detail.status = 3			// 改为已接单状态
						const now = new Date()
						this.detail.acceptTime = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} 
							${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
						if(data.code==200){
							uni.showModal({
								title: '接单',
								content: '接单成功！',
								showCancel: false,
								success: res => {
									if(res.confirm){
										
									}
								},
							});
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							});
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			// 提交工单
			submit(){
				if(this.detail.type==types.机房巡检){
					uni.navigateTo({
						url: `../submit_device/submit_device?id=${this.detail.id}&source=${this.detail.source}`,
					});
				}else{
					uni.navigateTo({
						url: `../submit_user/submit_user?id=${this.detail.id}&source=${this.detail.source}`,
					});
				}
			}
		}
	}
</script>

<style scoped>
	textarea {
		margin: 0 20rpx;
		background-color: white;
		border-radius: 15rpx;
		width: 700rpx;
		min-height: 200rpx;
		padding: 10rpx;
	}

	.gallery {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.gallery>image {
		width: 200rpx;
		height: 200rpx;
		flex-grow: 0;
		flex-shrink: 0;
		margin: 10rpx;
	}
</style>
